<template>
  <mt-navbar title="活动详情"> </mt-navbar>
  <view v-if="detailInfo" class="safety-150 px-32rpx pt-24rpx min-h-100vh bg-#ffffff">
    <view class="relative h-400rpx mb-40rpx">
      <uv-swiper
        :list="detailInfo.coverFile"
        key-name="url"
        indicator-style="right: 20rpx"
        :autoplay="false"
        circular
        height="400rpx"
        @change="(e) => (swiperCurrent = e.current)"
      >
        <!-- <template #indicator>
          <view class="bg-[rgba(0,0,0,0.55)] px-18rpx pb-8rpx rd-30rpx">
            <text class="text-24rpx text-#ffffff line-height-24rpx">{{ swiperCurrent + 1 }}/{{ detailInfo.coverFile.length }}</text>
          </view>
        </template> -->
      </uv-swiper>
      <view
        v-if="detailInfo.activityStatus === 3 || detailInfo.activityStatus === 4"
        class="bg-#F94B4A absolute right-0 top-0 px-24rpx py-16rpx text-28rpx text-#ffffff z-2"
        style="border-radius: 0 0 0 40rpx"
      >
        待开始
      </view>
      <view
        v-if="detailInfo.activityStatus === 5"
        class="bg-#007BFF absolute right-0 top-0 px-24rpx py-16rpx text-28rpx text-#ffffff z-2"
        style="border-radius: 0 0 0 40rpx"
      >
        进行中
      </view>
      <view
        v-if="detailInfo.activityStatus === 6"
        class="bg-#28B094 absolute right-0 top-0 px-24rpx py-16rpx text-28rpx text-#ffffff z-2"
        style="border-radius: 0 0 0 40rpx"
      >
        已完成
      </view>
    </view>
    <view class="text-40rpx text-#1C213E font-bold mb-32rpx">{{ detailInfo.activityName }}</view>
    <view class="flex items-start mb-24rpx">
      <image class="w-32rpx h-32rpx mr-16rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-activity3.svg"></image>
      <view class="flex-1 min-w-0">
        <view class="text-24rpx text-#727687">活动主题</view>
        <view class="text-28rpx text-#1C213E">{{ detailInfo.activityType }}</view>
      </view>
    </view>
    <view class="flex items-start mb-24rpx">
      <image class="w-32rpx h-32rpx mr-16rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-activity4.svg"></image>
      <view class="flex-1 min-w-0">
        <view class="text-24rpx text-#727687">活动时间</view>
        <view class="text-28rpx text-#1C213E"
          >{{ dayjs(detailInfo.startTime).format('YYYY-MM-DD HH:mm') }} - {{ dayjs(detailInfo.endTime).format('YYYY-MM-DD HH:mm') }}</view
        >
      </view>
    </view>
    <view class="flex items-start mb-24rpx">
      <image class="w-32rpx h-32rpx mr-16rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-activity7.png"></image>
      <view class="flex-1 min-w-0">
        <view class="text-24rpx text-#727687">报名截止时间</view>
        <view class="text-28rpx text-#1C213E">{{ dayjs(detailInfo.customerDeadline).format('YYYY-MM-DD HH:mm') }}</view>
      </view>
    </view>
    <view v-if="detailInfo.addressShowStatus === 1" class="flex items-start mb-24rpx">
      <image class="w-32rpx h-32rpx mr-16rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-activity6.svg"></image>
      <view class="flex-1 min-w-0">
        <view class="text-24rpx text-#727687">地址</view>
        <view class="text-28rpx text-#1C213E">{{ detailInfo.province }}{{ detailInfo.city }}{{ detailInfo.address }}</view>
      </view>
    </view>
    <view v-if="detailInfo.activityStatus === 6" class="flex items-center justify-between mb-24rpx">
      <view class="text-40rpx text-#1484EE font-bold">返佣￥{{ amountTransfer(detailInfo.rebate) }}</view>
      <view class="text-28rpx text-#1C213E">签到人数：{{ detailInfo.signInNum }}</view>
    </view>
    <view class="text-32rpx text-#1C213E font-bold mb-24rpx mt-60rpx">报名用户</view>
    <scroll-view class="user-box" scroll-x>
      <view v-for="item in detailInfo.customerSignUpList" :key="item.id" class="w-96rpx text-center mr-40rpx inline-block">
        <image
          class="w-96rpx h-96rpx mb-16rpx rd-96rpx"
          :src="item.avatarUrl ? item.avatarUrl : 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/default_avatar.png'"
        ></image>
        <view class="text-28rpx text-#1C213E">{{ item.signUpName }}</view>
      </view>
    </scroll-view>
    <view class="text-32rpx text-#1C213E font-bold mb-24rpx">活动描述</view>
    <view class="text-28rpx text-#727687">{{ detailInfo.remark }}</view>
    <view class="text-32rpx text-#1C213E font-bold mb-24rpx mt-60rpx">日程安排</view>
    <view v-if="detailInfo.scheduleFile" class="mb-14rpx">
      <image v-for="(item, index) in detailInfo.scheduleFile" :key="index" class="w-full h-auto mb-10rpx" mode="widthFix" :src="item.url"></image>
    </view>
  </view>
</template>

<script setup>
import { activitygetMyShareActivityDetail } from '@/subActivity/api/index';
import { amountTransfer } from '@/utils/tools';
import dayjs from 'dayjs';

const swiperCurrent = ref(0);
const detailInfo = ref(null);
function getDetail() {
  activitygetMyShareActivityDetail({ id: id.value }).then((res) => {
    const obj = res.data;

    detailInfo.value = obj;
  });
}

const id = ref('');
onLoad((options) => {
  id.value = options.id;
  getDetail();
});
</script>

<style lang="scss" scoped>
.user-box {
  width: 100%;
  white-space: nowrap;
  margin-bottom: 60rpx;
}
</style>
